<!DOCTYPE html>
<html>

  <head>
    
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    
    <title>Trash Collection Optimization Tool</title>
      
    <!-- to load Twitter Bootstrap -->
    <link rel="stylesheet" type="text/css" media="screen" href="css/bootstrap.min.css" >

    <!-- load heading font from Google Fonts -->
    <link rel="stylesheet" type="text/css" href='http://fonts.googleapis.com/css?family=Share+Tech'>
        
    <!-- jQuery -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    
    <!-- jQuery UI -->
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
    
    <!-- jQUery UI theme -->
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/flick/jquery-ui.css" />
    <!-- <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/humanity/jquery-ui.css" type="text/css" />  -->
    <!-- <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css" type="text/css" />     -->
    <!-- <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/pepper-grinder/jquery-ui.css" type="text/css" /> -->
    <!-- <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/black-tie/jquery-ui.css" type="text/css" /> -->
    <!-- <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/blitzer/jquery-ui.css" type="text/css" /> -->
    <!-- <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/eggplant/jquery-ui.css" type="text/css" /> -->
    <!-- <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/cupertino/jquery-ui.css" type="text/css" /> -->
    <!-- <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/dark-hive/jquery-ui.css" type="text/css" /> -->
    <!-- <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/dot-luv/jquery-ui.css" type="text/css" /> -->
    <!-- <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css" type="text/css" /> -->
    <!-- <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/blitzer/jquery-ui.css" type="text/css" /> -->
    <!-- <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/excite-bike/jquery-ui.css" type="text/css" /> -->    
    <!-- <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/hot-sneaks/jquery-ui.css" type="text/css" /> -->
    <!-- <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/le-frog/jquery-ui.css" type="text/css" /> -->
    <!-- <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/mint-choc/jquery-ui.css" type="text/css" /> -->
    <!-- <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/overcast/jquery-ui.css" type="text/css" /> -->
    
    <!-- Google Maps API key -->
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA0bHlB5amUrz5EAEPLFoizXlMoB6N00tM&amp;sensor=false&amp;language=en"></script>    

    <!-- external javascript file -->
    <script src="js/gmaps.js"></script>

    <!-- css specific for printing -->
    <link rel="stylesheet" type="text/css" href="css/print.css" media="print">

    <!-- css specific for mobile devices -->
    <link rel="stylesheet" type="text/css" href="css/mobile.css" media="only screen and (min-device-width: 320px) and (max-device-width: 480px)" />

    <!-- css file for desktops -->
    <link rel="stylesheet" type="text/css" href="css/style.css" media="only screen and (min-width: 800px)">

  </head>

  <body>

    <!-- this had to be included in the body otherwise it won't work -->
    <script src="js/bootstrap.js"></script>

    <div id="wrapper">

        <div id="title">
            <h1>Trash Collection Optimization Tool</h1>
        </div>

        <div id="date">
            <script>showDate()</script>
        </div>

        <div id="content">

            <div id="map_wrapper">

                <div id="controls_panel" class="btn-toolbar">
                    
                    <div class="btn-group">
                        <button id="btn_show" class="btn btn-primary btn-small dropdown-toggle" data-toggle="dropdown"><i class="icon-map-marker icon-white"></i> Show <span class="caret"></span></button>
                        <ul class="dropdown-menu">
                            <li><a href="javascript:void(0)" onclick="showFull()"><!-- <i class="icon-"></i> -->Full</a></li>
                            <li><a href="javascript:void(0)" onclick="showEmpty()"><!-- <i class="icon-"></i> -->Empty</a></li>
                            <li><a href="javascript:void(0)" onclick="showAll()"><!-- <i class="icon-"></i> -->All</a></li>
                        </ul>
                        
                    </div>

                    <div id="btn_grp_clear" class="btn-group"><button id="btn_clear" class="btn btn-primary btn-small" onclick="clean()"><i class="icon-remove icon-white"></i> Clear Map</button></div>
                    <div id="btn_grp_route" class="btn-group"><button id="btn_route" class="btn btn-primary btn-small" onclick="showRoute()"><i class="icon-download-alt icon-white"></i> Get Route</button></div>
                    <div class="btn-group"><button id="btn_print" class="btn btn-primary btn-small" onclick="printRoute()"><i class="icon-print icon-white"></i> Print Route</button></div>
                        
                    <!-- Set percentage full:
                    <select>
                      <option value="0">0%</option>          
                      <option value="20">25%</option>
                      <option value="50">50%</option>
                      <option value="70">75%</option>
                      <option value="100">100%</option>
                    </select>

                    <input type="button" value="Set Full"> -->
                    
                </div>

                <div id="map_canvas"></div>

            </div> <!-- map_wrapper -->

            <div id="results">
                <p>Calculated Distance: <span id="distance">N/A</span>
                Calculated Time: <span id="time">N/A</span></p>
            </div>

            <div id="directions_panel"><p>No route currently selected. Press the <strong>Get Route</strong> button.</p></div>

        </div> <!-- content -->
        
    </div> <!-- wrapper -->        

    <div id="footer">&copy; 2012 VIA University College</div>

    <div id="dialog" title="Calculating Route...">
        <div class="progress"><span><strong></strong></span></div>
    </div>

    <div id="dialog_print" title="No route selected!">
        Do you still want to print?
    </div>
      
  </body>
</html>
